<template>
	<view class="content padding-bottom-sm">
			<view class="" style="background-color: #fff;">
				<u-tabs lineWidth="30" lineColor="#7D81A9" :current="current"
				 :activeStyle="{
	            color: '#7D81A9',
	            fontWeight: 'bold',
	            transform: 'scale(1)'
	        }"
			   :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }"
			 itemStyle="width:200rpx; height: 70rpx;" :list="list1" @click="click"></u-tabs>
			</view>


		<view class="list ">
		  <view class="item" v-for="(item,index) in form " :key="index">
			<image v-if="item.order_state == '进行中'" class="stateImg" src="../../static/img/Slice 43.png"></image>
			<image v-if="item.order_state == '共创商单'" class="stateImg" src="../../static/img/Slice 79 (1).png"></image>
			<image v-if="item.order_state == '已结束'" class="stateImg" src="../../static/img/Slice 76.png"></image>
		    <view class="itemContent">
		      <view class="title">
		        <view class="name">
		       {{item.shop_name}}
		        </view>
		        <view class="money">
		          <span style="font-size: 24rpx;">￥{{item.price}}</span>
		          <!-- <span style="font-size: 24rpx;">%</span> -->
		        </view>
		      </view>
		      <view class="lableBoxS">
		        <view style="background-color: #DDE3F9;">
		          {{item.city_data}}
		        </view>
		        <view style="background-color: #FFDFC1;">
		         {{item.category_name}}
		        </view>
		        <view style="background-color: #CAE5BD;">
		         {{item.content_type_name}}
		        </view>
		      </view>
		      <view class="time">
		        截止：{{item.recruit_end_time}}
		      </view>
		      <view class="bottomBox">
		        <view class="avatar">
		          <image :src="item.avatar" mode=""></image>
		        </view>
		        <view class="userName">
		          {{item.nickname}}
		        </view>
		    <view class="identityBoxS">
		      <view class="" v-for="(item1,i1) in item.identity_type" :key="i1">
		        {{item1}}
		      </view>
		    </view>
		        <view class="btnS">
		          <image class="shareImg" src="../../static/img/Frame (3)222.png" @tap="goDetail(item.order_sn)" mode=""></image>
				  <image class="shareImg" src="../../static/img/Frame2222.png" @tap="goDetails(item.order_sn)" mode=""></image>
           <button class="btnNone" style="width: 52rpx;height: 52rpx;display: flex;align-items: top;"  open-type="share" catchtap="share">
		          <image class="shareImg" src="../../static/img/Frame.png" mode=""></image>
            </button>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				form:[],
				obj:{
					type:1
				},
				value: '',
				list1: [{
					name: '全部商单',
				}, {
					name: '进行中',
				}, {
					name: '共创商单'
				}, {
					name: '已结束'
				}],
        current:0
			};
		},
		created() {
			
		},
		async onLoad(obj) {
      this.obj.type = obj.type
      this.current = this.obj.type -1
			const res= await uni.$http.post('user/get_my_order_list',this.obj)
			this.form = res.data.data
      if(!this.current || this.current =='undefind') {
        this.current = 0
      }
		},
		methods: {
			// 跳转详情
			goDetail(order_sn) {
			  uni.navigateTo({
			    url: '/pages/orderDetails/orderDetails?order_sn=' + order_sn
			  })
			},
			// 跳转详情
			goDetails(order_sn) {
			  uni.navigateTo({
			    url: '/pages/my/darlb?order_sn=' + order_sn
			  })
			},
    async click(e){
	this.obj.type = e.index+1
	console.log('11',this.obj.type);
	const res= await uni.$http.post('user/get_my_order_list',this.obj)
	console.log('5555',res.data.data);
	 this.form = res.data.data
}
		}
	}
</script>

<style lang="scss">
  .content {
    // min-height: 100vh;
    background-color: #F2F3F6;

 
   
  .list {
      .item {
        width: 686rpx;
        height: 294rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx auto;

        .stateImg {
          width: 92rpx;
          height: 36rpx;
        }

        .itemContent {
          padding: 0 22rpx 0 24rpx;

          .title {
            display: flex;
            align-items: center;

            .name {
              width: 380rpx;
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .money {
              flex: 1;
              text-align: right;
              color: #EAA04A;
              font-size: 36rpx;
            }
          }

          .lableBoxS {
            display: flex;
            color: rgba(0, 0, 0, 0.6);
            font-size: 20rpx;
            margin-top: 14rpx;
            margin-bottom: 18rpx;

            view {
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              border-radius: 22rpx;
              margin-right: 8rpx;
            }
          }

          .time {
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 24rpx;
          }

          .bottomBox {
            display: flex;
            align-items: center;
            height: 52rpx;

            .avatar {
              width: 36rpx;
              height: 36rpx;
              border-radius: 18rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .userName {
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              color: rgba(0, 0, 0, 0.6);
              margin: 0 8rpx;
            }

            .identityBoxS {
              flex: 1;
              display: flex;

              view {
                // width: 52rpx;
                height: 24rpx;
                padding: 0 8rpx;
                line-height: 22rpx;
                text-align: center;
                margin-right: 4rpx;
                background-color: #B0A5FF;
                color: #FFFFFF;
                font-size: 18rpx;
                border-radius: 10rpx 0 10rpx;
              }
            }

            .btnS {
              display: flex;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-right: 16rpx;
              }

              .shareImg {
                width: 52rpx;
                height: 52rpx;
              }
            }
          }
        }
      }
    }

   
  }
</style>